<template>
  <div class="nft-detail">
    <div class="detail-content">
      <!-- 图片展示区 -->
      <div class="image-section">
        <el-image :src="nft.image" fit="scale-down" class="nft-image">
          <template #error>
            <div class="image-error">
              <el-icon :size="40"><Picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="image-overlay">
          <div class="rarity-badge" :style="{ background: getRarityColor(nft.rarity) }">
            {{ nft.rarity }}
          </div>
        </div>
      </div>

      <!-- 信息展示区 -->
      <div class="info-section">
        <h2 class="nft-name">{{ nft.name }}</h2>
        
        <!-- Token ID -->
        <div class="info-item">
          <span class="label">Token ID</span>
          <span class="value token-id">{{ nft.id }}</span>
        </div>

        <!-- 所有者 -->
        <div class="info-item">
          <span class="label">所有者</span>
          <div class="value address-value">
            <span class="address">{{ formatAddress(nft.owner) }}</span>
            <el-button 
              link 
              type="primary" 
              @click="copyAddress(nft.owner)"
              class="copy-btn"
            >
              <el-icon><DocumentCopy /></el-icon>
            </el-button>
          </div>
        </div>

        <!-- 价格信息 -->
        <div v-if="isListed" class="info-item price-info">
          <span class="label">当前价格</span>
          <span class="value price-value">{{ formatPrice(nft.price) }} TRES</span>
        </div>

        <!-- 上架时间 -->
        <div v-if="isListed" class="info-item">
          <span class="label">上架时间</span>
          <span class="value">{{ formatTime(nft.listTime) }}</span>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <template v-if="isOwner">
            <el-button 
              v-if="!isListed"
              type="primary" 
              @click="$emit('list', nft)"
              class="action-btn"
            >
              上架出售
            </el-button>
            <el-button 
              v-else
              type="danger" 
              @click="$emit('cancel', nft)"
              class="action-btn"
            >
              取消上架
            </el-button>
          </template>
          <el-button 
            v-else-if="isListed"
            type="primary" 
            @click="$emit('buy', nft)"
            class="action-btn"
          >
            立即购买
          </el-button>
        </div>
      </div>
    </div>

    <!-- 区块链信息 -->
    <div class="blockchain-info">
      <h3 class="section-title">区块链信息</h3>
      <div class="info-grid">
        <div class="grid-item">
          <span class="grid-label">合约地址</span>
          <div class="grid-value">
            <span class="address">{{ formatAddress(contractAddress) }}</span>
            <el-button 
              link 
              type="primary" 
              @click="copyAddress(contractAddress)"
              class="copy-btn"
            >
              <el-icon><DocumentCopy /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="grid-item">
          <span class="grid-label">Token 标准</span>
          <span class="grid-value">ERC-721</span>
        </div>
        <div class="grid-item">
          <span class="grid-label">区块链</span>
          <span class="grid-value">Ethereum</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Picture, DocumentCopy } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useWalletStore } from '../../stores/walletStore';

const walletStore = useWalletStore();

// 接收父组件传递的数据
const props = defineProps({
  nft: {
    type: Object,
    required: true
  },
  isListed: {
    type: Boolean,
    default: false
  },
  isOwner: {
    type: Boolean,
    default: false
  }
});

// 定义事件
defineEmits(['list', 'buy', 'cancel']);

// 合约地址
const contractAddress = walletStore.contractAddress;

// 格式化地址显示
const formatAddress = (address) => {
  if (!address) return '未知';
  return address.slice(0, 6) + '...' + address.slice(-4);
};

// 复制地址
const copyAddress = async (address) => {
  try {
    await navigator.clipboard.writeText(address);
    ElMessage.success('地址已复制到剪贴板');
  } catch (err) {
    ElMessage.error('复制失败');
  }
};

// 格式化价格显示
const formatPrice = (price) => {
  return Number(price).toFixed(2);
};

// 格式化时间显示
const formatTime = (timestamp) => {
  const date = new Date(timestamp * 1000);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取稀有度颜色
const getRarityColor = (rarity) => {
  switch (rarity) {
    case 'Legendary': return 'linear-gradient(135deg, #FFD700, #FFA500)';
    case 'Epic': return 'linear-gradient(135deg, #9932CC, #800080)';
    case 'Rare': return 'linear-gradient(135deg, #0066CC, #000080)';
    case 'Common': return 'linear-gradient(135deg, #32CD32, #006400)';
    default: return 'linear-gradient(135deg, #808080, #404040)';
  }
};
</script>

<style scoped>
.nft-detail {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.detail-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
}

.image-section {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nft-image {
  width: 100%;
  height: 250px;
  display: block;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
}

.rarity-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.info-section {
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 600px;
}

.nft-name {
  margin: 0 0 20px;
  font-size: 24px;
  color: #303133;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #909399;
  font-size: 14px;
}

.value {
  color: #303133;
  font-size: 14px;
}

.token-id {
  font-family: monospace;
  font-size: 16px;
  color: #409EFF;
}

.address-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.address {
  font-family: monospace;
}

.copy-btn {
  padding: 2px;
}

.price-info .price-value {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.action-btn {
  flex: 1;
}

.blockchain-info {
  margin-top: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin: 0 0 20px;
  font-size: 18px;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.grid-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-label {
  color: #909399;
  font-size: 14px;
}

.grid-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
  font-size: 14px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .detail-content {
    grid-template-columns: 1fr;
  }

  .image-section {
    max-width: 300px;
    margin: 0 auto;
  }
}
</style> 